<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蒙汉舆情汇聚与分析系统</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/resources/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/resources/css/menu.css" />
<link rel="stylesheet" type="text/css"
	href="<%=request.getContextPath()%>/resources/css/templatemo_justified.css" />

<script
	src="<%=request.getContextPath()%>/resources/js/index/html5shiv.js"></script>
<script
	src="<%=request.getContextPath()%>/resources/js/index/respond.min.js"></script>
<script 
    src="<%=request.getContextPath() %>resources/js/echarts/echarts.js"></script>
  <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
	//路径配置
	require.config({
	    paths: {
	        echarts: 'http://echarts.baidu.com/build/dist'
	    }
	});

	// 使用
	require(
	    [
	        'echarts',
	        'echarts/chart/map', 
	        'echarts/chart/line',
	        'echarts/chart/bar',
	         'echarts/chart/pie' 
	        // 使用柱状图就加载bar模块，按需加载
	    ],
	    function (ec) {
	        // 基于准备好的dom，初始化echarts图表
	        var myChart = ec.init(document.getElementById('map')); 
	        var myChart1 = ec.init(document.getElementById('bo')); 
	        var myChart2 = ec.init(document.getElementById('place')); 
	        var myChart3 = ec.init(document.getElementById('person')); 
	        var myChart4 = ec.init(document.getElementById('org')); 
	        var option = {
		    tooltip : {
		        trigger: 'item'
		    },
		    dataRange: {
		        min: 0,
		        max: 2500,
		        x: 'left',
		        y: 'bottom',
		        text:['高','低'],           // 文本，默认为数值文本
		        calculable : true
		    },
		    toolbox: {
		        show : true		    
		    },
		    series : [
		        {
		            name: '相关新闻',
		            type: 'map',
		            mapType: 'china',
		            roam: true,
		            itemStyle:{
		                normal:{label:{show:true}},
		                emphasis:{label:{show:true}}
		            },
		            data:[
		                {name: '北京',value: Math.round(Math.random()*1000)},
		                {name: '天津',value: Math.round(Math.random()*1000)},
		                {name: '上海',value: Math.round(Math.random()*1000)},
		                {name: '重庆',value: Math.round(Math.random()*1000)},
		                {name: '河北',value: Math.round(Math.random()*1000)},
		                {name: '河南',value: Math.round(Math.random()*1000)},
		                {name: '云南',value: Math.round(Math.random()*1000)},
		                {name: '辽宁',value: Math.round(Math.random()*1000)},
		                {name: '黑龙江',value: Math.round(Math.random()*1000)},
		                {name: '湖南',value: Math.round(Math.random()*1000)},
		                {name: '安徽',value: Math.round(Math.random()*1000)},
		                {name: '山东',value: Math.round(Math.random()*1000)},
		                {name: '新疆',value: Math.round(Math.random()*1000)},
		                {name: '江苏',value: Math.round(Math.random()*1000)},
		                {name: '浙江',value: Math.round(Math.random()*1000)},
		                {name: '江西',value: Math.round(Math.random()*1000)},
		                {name: '湖北',value: Math.round(Math.random()*1000)},
		                {name: '广西',value: Math.round(Math.random()*1000)},
		                {name: '甘肃',value: Math.round(Math.random()*1000)},
		                {name: '山西',value: Math.round(Math.random()*1000)},
		                {name: '内蒙古',value: Math.round(Math.random()*1000)},
		                {name: '陕西',value: Math.round(Math.random()*1000)},
		                {name: '吉林',value: Math.round(Math.random()*1000)},
		                {name: '福建',value: Math.round(Math.random()*1000)},
		                {name: '贵州',value: Math.round(Math.random()*1000)},
		                {name: '广东',value: Math.round(Math.random()*1000)},
		                {name: '青海',value: Math.round(Math.random()*1000)},
		                {name: '西藏',value: Math.round(Math.random()*1000)},
		                {name: '四川',value: Math.round(Math.random()*1000)},
		                {name: '宁夏',value: Math.round(Math.random()*1000)},
		                {name: '海南',value: Math.round(Math.random()*1000)},
		                {name: '台湾',value: Math.round(Math.random()*1000)},
		                {name: '香港',value: Math.round(Math.random()*1000)},
		                {name: '澳门',value: Math.round(Math.random()*1000)}
		            ]
		        }
		    ]
};
	    var option1 = {
                //数据提示框配置  
                tooltip: {  
                    trigger: 'item' //触发类型，默认数据触发，见下图，可选为：'item' | 'axis' 其实就是是否共享提示框  
                },  
                grid:{x:45, y:10,x2:10,y2:20},
                calculable: true,  
                //轴配置  
                xAxis: [  
                        {  
                            type: 'category',
                           // data:[{value:"${year}"+"-"+"${month}"+"-"+"${date}"}],
                           data: ['2016-4-5', '2016-06-05', '2016-06-10', '2016-06-15', '2016-06-20', '2016-06-25', '2016-06-30', '2016-07-05', '2016-07-10','2016-07-15', '2016-07-20'],  
                        }  
                    ],  
                //Y轴配置  
                yAxis: [  
                        {  
                            type: 'value',  
                          //  splitArea: { show: true },  
                         //   name:"数值"  
                        }  
                    ],  
                //图表Series数据序列配置  
               /*  series: []
                }; */
                 series: [  
                        {  
                            type: 'line',
                             smooth:true,
                             itemStyle: {normal: { areaStyle: {type: 'default'}} },
                            // data:[{value:"${integerlist[i]}"}],
                            data: [ 500, 100, 1000, 2500, 2000, 1000, 200, 1000, 500, 500, 2000,100]  
                        }
                    ]  
            };  
/* $ajax({
url: basePath+"",
type :'get',
dataType:'json',
success : function(date){
	 var Item =function(){
		 return{
		 name:'意向',
		 type:'line',
		 smooth:true,
		 itemStyle: {normal:{areaStyle:{type: 'default'}}},
		 data:[]
		 }
	 };
	 var indexNewstimeNum =date.indexNewstimeNum;
	 var series = [];
	 for(var i=0;i<date.length;i++){
		  var tp=new Item();
		  tp.name=startime[i];
		  tp.data=function(){
		  var list =[];
		  var tpl = indexNewstimeNum[i];
		  for(var k=0,klen =tpl.length;k<klen;k++){
		      list.push(topl[k].orders);
		  }
		   return list;
		  }();
		  series.push(tp);
		 }
		 
	 option1.xAxis.data =indexNewstimeNum;
	 option1.series = series;
	 myChart1.setOption(option1);
	}

}) ; */                
            var option2 = {
			    tooltip : {
			        trigger: 'item'
			    },
			    grid:{
               x:35,
               y:10,
               x2:10,
               y2:20
               },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'value',
			            boundaryGap : [0, 0.01]
			        }
			    ],
			    yAxis : [
			        {
			            type : 'category',
			            data : ['巴西','印尼','美国','印度','中国','世界']
			        }
			    ],
			    series : [
			        {
			            type:'bar',
			            data:[100, 200, 500, 550, 600, 600]
			        }
			    ]
			};
			 var option3 = {
			    tooltip : {
			        trigger: 'item'
			    },
			    grid:{
               x:35,
               y:10,
               x2:10,
               y2:20
               },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'value',
			            boundaryGap : [0, 0.01]
			        }
			    ],
			    yAxis : [
			        {
			            type : 'category',
			            data : ['巴西','印尼','美国','印度','中国','世界']
			        }
			    ],
			    series : [
			        {
			            type:'bar',
			            data:[100, 200, 500, 550, 600, 600]
			        }
			    ]
			};
var	option4 = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    grid:{x:2,y:2,x2:2,y2:2,},
    calculable : false,
    series : [
        {
         name:'实体总数:',
         type:'pie',
         selectedMode: 'single',
         radius : [0, 30],
         center: ['50%', '50%'],
        // funnelAlign: 'right',
         itemStyle : {
            normal : {
                label : {position : 'inner',},//内容显示在里面
                labelLine : {show : false},//是否显示线
                }
             },
             
          data:[{value: "${indexEntity['per']}"+"${indexEntity['org']}"+"${indexEntity['loc']}",name:"实体总数：fffghhg"}]
      },
         {
           name:'数量',
           type:'pie',
           //selectedMode: 'single',
           radius : [35, 75],
       //    center: ['50%', '50%'],
        itemStyle : {
              normal : {
                  label : {position : 'inner',},//内容显示在里面
                  labelLine : {show : false}//是否显示线
                  }
               },
            data:[{value:"${indexEntity['per']}", name:'人物'},{value:"${indexEntity['org']}", name:'组织机构'},{value:"${indexEntity['loc']}", name:'地点'}]
        },
  
       
    ]
};                          
	        // 为echarts对象加载数据 
	        myChart.setOption(option); 
	        myChart1.setOption(option1); 
	        myChart2.setOption(option2); 
	        myChart3.setOption(option3); 
	        myChart4.setOption(option4); 
	    }
	);
</script>
</head>

<body>



	<div id="container" class="container bd" style="float: right">

		<img
			src="<%=request.getContextPath()%>/resources/images/templatemoheader.jpg"
			class="img-responsive" />


		<ul class="nav nav-justified bd">

			<li><a href="/mwyqMonitor/topic/" class="meng">首页&nbsp;&nbsp;&nbsp;</a></li>
			<li><a href="/mwyqMonitor/news/" class="meng">实时热点&nbsp;</a></li>
			<li><a href="/mwyqMonitor/topic/" class="meng">敏感事件&nbsp;</a></li>
			<li><a href="/mwyqMonitor/topic/" class="meng">统计分析&nbsp;</a></li>
			<li><a href="#" class="sub meng">自定义检测</a></li>
		</ul>

		<div class="row space29 bd" style="padding-left: 20px">
			<!-- row 1 begins -->
			<div class="col-md-3 bd">
				<div class="meng">
					<input type="button" value="搜索"
						style="height: 100px; width: 50px; margin-top: 10%; background-color: #cdcdcd; float: left" />
				</div>
				<div class="meng">
					<input type="text"
						style="height: 400px; margin-top: auto; width: 50px; float: left" />
				</div>
			</div>
			<div class="col-md-4 bd"
				style="height: 600px; width: 47.5%; float: left">
				<div class="new-des bd">
					<div class="panel panel-default">
						<div class="panel-heading ">话题地图</div>
						<div id="map" class="panel-body" style="height: 530px;"></div>
					</div>
				</div>

			</div>
			<div class="col-md-9 bd"
				style="height: 600px; width: 47.5%; float: left">
				<div class="col-md-5 bd"
					style="height: 300px; width: 100%; float: left">
					<div class="new-des  bd">
						<div class="panel panel-default">
							<div class="panel-heading ">新闻趋势</div>
							<div id="bo" class="panel-body"></div>
						</div>
					</div>

				</div>

				<div class="col-md-8"
					style="height: 300px; width: 100%; float: left">
					<div class="col-md-1 bd">
						<div class="new-des  bd">
							<div class="panel panel-default">
								<div class="panel-heading ">地点统计</div>
								<div id="place" class="panel-body"></div>
							</div>
						</div>

					</div>
					<div class="col-md-1 bd">
						<div class="new-des  bd">
							<div class="panel panel-default">
								<div class="panel-heading ">人物统计</div>
								<div id="person" class="panel-body"></div>
							</div>
						</div>

					</div>

					<div class="col-md-1 bd">
						<div class="new-des  bd">
							<div class="panel panel-default">
								<div class="panel-heading ">组织机构统计</div>
								<div id="org" class="panel-body"></div>
							</div>
						</div>

					</div>
					<div style="clear: both"></div>
				</div>
				<div style="clear: both"></div>
			</div>
			<!-- /row 1 -->
		</div>

		<div class="row space30  meng bd" style="padding-left: 5%">
			<!-- row 2 begins -->
			<div class="bottomRealContent bd">

				<div class="new-des meng bd">
					<div class="panel panel-default meng">
						<div class="panel-heading meng">热门话题</div>
					</div>
				</div>

				<c:forEach items="${topicAndNumList}" var="topic">
					<div class="bottomContentBox bd"
						style="font-family: Mongolian Baiti81; moz-writing-mode: vertical-lr; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -o-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: tb-lr">
						<div class="huati bd">
							<%-- 	     		${topic.topicid} --%>
							<a
								href="<%=request.getContextPath() %>/topic/${topic.topicid}/news">
								<strong class="primary-font fix-width ">
									【${topic.newsNum}】 <%-- 						${topic.topiclabel}  --%> <!-- 						【新闻标题】 -->
									${topic.newsTitle} <!-- 						【 --> <%-- 						${topic.topicid} --%>
							</strong>
							</a> <small class="pull-right text-muted">${topic.topicproducedtime}</small>
						</div>
						<p class="show-line-3 bd"
							style="width: 60%; height: 450px; margin-top: 5px;">
							<!-- 					【新闻标题】 -->
							${topic.newsTitle}
							<!-- 					【新闻内容】  -->
							${topic.newsContent}
						</p>
					</div>
					<!--  			  	<tr> -->
					<%-- 	 			  	<td>(${topic.newsNum})</td> --%>
					<%-- 	 			  	<td><a id="" href="<%=request.getContextPath() %>/topic/topicPage?page=1">${topic.topiclabel}</a></td> --%>
					<%-- 	 			  		<td>[新闻作者]${topic.newsAuthor}</td> --%>
					<%-- 	 			  		<td>[新闻标题]${topic.newsTitle}</td> --%>
					<%-- 	 			  		<td>[新闻内容]${topic.newsContent}</td> --%>
					<%-- 	 			  		<td>[时间]${topic.newsTime}</td> --%>
					<!-- 	 			</tr> -->
				</c:forEach>

			</div>
		</div>
		<!-- /row 2 -->

		<!-- Site footer -->
		<div class="footer bd">
			<p style="text-align: center;">Copyright © 2016 中央民族大学</p>
		</div>
		<!-- /container -->
	</div>
</body>
</html>
